<template>
  <!-- 模板，html -->
  <div class="hospital_map">
    <div class="top" style="margin-bottom: 10px">
      <div class="left">
        <el-button
          type="primary"
          icon="el-icon-back"
          @click="$router.go(-1)"
          size="small"
          >返回</el-button
        >
      </div>
      <div class="right">
        <el-col style="width: 380px">
          <span>当前位置：</span>
          <el-autocomplete
            class="inline-input"
            v-model="hoinput"
            :fetch-suggestions="querySearch"
            placeholder="请输入医院名称"
            clearable
            size="small"
          >
          </el-autocomplete>

          <el-button type="primary" @click="changeInput" size="small"
            >切换</el-button
          >
        </el-col>
      </div>
    </div>

    <!-- 地图渲染的容器 -->
    <div id="container_hospital"></div>
  </div>
</template>
<script>
// 脚本，js
import { get } from "@/utils/request";
export default {
  data() {
    return {
      position: [116.397428, 39.90923],
      // 选择框数据

      hospital: [],
      hoinput: "",
      total: 100,
      inputhosData: "",
      listtotal: 0,
      name: "",
    };
  },
  methods: {
    // 切换点击按钮
    async changeInput() {
      let params = {
        page: 1,
        pageSize: this.total,
        name: this.hoinput,
      };
      let res = await get("/hospital/pageQuery", params);

      this.position = [res.data.list[0].longitude, res.data.list[0].latitude];

      this.map();
    },
    //  带数据的输入框
    querySearch(queryString, cb) {
      var inputhosData = this.inputhosData;
      var results = queryString
        ? inputhosData.filter(this.createFilter(queryString))
        : inputhosData;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (inputhosData) => {
        return (
          inputhosData.value
            .toLowerCase()
            .includes(queryString.toLowerCase()) === true
        );
      };
    },
    loadAll() {
      return this.inputhosData;
    },
    // 输入框的相关数据
    async getInputData() {
      let params = {
        page: 1,
        pageSize: this.total,
      };
      let res = await get("/hospital/pageQuery", params);
      // 输入框显示数据
      this.inputhosData = res.data.list.map((item) => {
        return {
          value: item.name,
          address: item.address,
        };
      });
      this.loadAll();
    },
    // 地图实例
    map() {
      var map = new AMap.Map("container_hospital", {
        zoom: 11, //级别
        center: this.position,
      });
      // 创建一个 Marker 实例：
      var marker = new AMap.Marker({
        position: this.position,
        title: this.$route.query.name,
      });

      // 将创建的点标记添加到已有的地图实例：
      map.add(marker);
    },
  },
  created() {
    // 获取医院的经纬度
    let { longitude, latitude, name, listtotal } = this.$route.query;
    this.listtotal = listtotal;
    this.hoinput = name;
    this.position = [+longitude, +latitude];
    this.getInputData();
  },

  // dom追加到网页中
  mounted() {
    this.map();
  },
};
</script>
<style scoped>
/* 样式，css */
#container_hospital {
  height: 600px;
}
/* 右边 */

.top {
  justify-content: space-between;
  display: flex;
}
</style>
